ELEMENTS

Editing
  • account_tree
  • bug_report

<textarea>

개행이 포함된 일반 텍스트를 입력하는 컨트롤을 나타낸다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    PHRASING CONTENT

    구문 콘텐츠(phrasing-content)가 예상되는 위치

  • 콘텐츠 모델

    TEXT

  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLTextAreaElement

    [Exposed=Window]
    interface HTMLTextAreaElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute DOMString autocomplete;
      [CEReactions] attribute unsigned long cols;
      [CEReactions] attribute DOMString dirName;
      [CEReactions] attribute boolean disabled;
      readonly attribute HTMLFormElement? form;
      [CEReactions] attribute long maxLength;
      [CEReactions] attribute long minLength;
      [CEReactions] attribute DOMString name;
      [CEReactions] attribute DOMString placeholder;
      [CEReactions] attribute boolean readOnly;
      [CEReactions] attribute boolean required;
      [CEReactions] attribute unsigned long rows;
      [CEReactions] attribute DOMString wrap;
    
      readonly attribute DOMString type;
      [CEReactions] attribute DOMString defaultValue;
      attribute [LegacyNullToEmptyString] DOMString value;
      readonly attribute unsigned long textLength;
    
      readonly attribute boolean willValidate;
      readonly attribute ValidityState validity;
      readonly attribute DOMString validationMessage;
      boolean checkValidity();
      boolean reportValidity();
      undefined setCustomValidity(DOMString error);
    
      readonly attribute NodeList labels;
    
      undefined select();
      attribute unsigned long selectionStart;
      attribute unsigned long selectionEnd;
      attribute DOMString selectionDirection;
      undefined setRangeText(DOMString replacement);
      undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
      undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
    };

구문

마크업 형식
<textarea>
Example

애트리뷰트

autocomplete keywords and enumerated attributes

양식(form) 내에 있는 입력 요소들의 자동 채우기 설정을 지정한다. 자동 채우기는 다음과 같이 두 가지 방식이 가능하다.

자동 완성 기대 맨틀(autofill expectation mantle)
사용자로부터 예상되는 입력을 나타낸다. 설정하는 방법은 on 키워드는 활성되고 off 키워드는 비활성된다. 생략될 수 있으며 생략되거나 유효하지 않은 경우에 기본값은 on이다. type 애트리뷰트가 hidden이 아닌 경우 사용된다.
자동 완성 앵커 맨틀(autofill anchor mantle)
주어진 값의 의미를 설명한다. 자동 완성 세부 토큰으로 구성된 공백으로 구분된 토큰의 정렬된 집합인 값을 가져야 한다. onoff 키워드는 사용할 수 없다. type 애트리뷰트가 hidden인 경우 사용된다.

지금까지의 내용은 HTML Standard 표준 사양에 나와있는 내용이지만 자동 완성 앵커 맨틀(autofill anchor mentle)에 대해 다음과 같은 이슈가 있다.

  • typehidden인 요소에게 자동 완성 기능 적용이 올바른가? [open issue]
  • 유저 에이전트에서의 동작 지원 여부가 명확하지 않다.

현재로서는 이 이슈에 대해 앞으로 시간을 두고 확인이 필요해 보이며 일반적인 자동 완성 기능인 자동 완성 기대 맨틀(autofill expectation mantle)의 구현을 위한 애트리뷰트라고 보는 편이 나을 것 같다.

기본값

on
cols non-negative integers선택

줄(행)당 예상되는 최대 문자 수를 지정한다. 시각적으로는 입력 방향으로 크기 변경이 발생한다. 보여질 수 있는 문자 수의 지정에 따라 발생된 크기이므로 디자인 목적으로 사용하는 것은 권장되지 않는다. 기본값은 20이다.

About Non-negative integers

음수가 아닌 유효한 정수를 나타낸다.

기본값

20

사용 예

dirname 

양식(form)을 제출시 입력된 텍스트의 쓰기 방향(dir 애트리뷰트)을 참조한다. 유저 에이전트는 이 값을 사용하여 사용자가 입력한 값을 전송시 쓰기 방향 값도 함께 전송한다. 지정되지 않은 경우 유저 에이전트는 상위 요소의 dir을 사용한다. 그래도 명시된 방향을 알 수 없다면 유저 에이전트는 문서의 기본 방향을 사용한다.

이 애트리뷰트가 명시되면 양식 요소의 값은 빈 문자열이 아니어야 한다.

dirname은 "<attribute-name-value>-dir"로 설정한다.
<form>
  <input type="text" name="username" dirname="username-dir">
</form>
실제 전송(문서의 dir 애트리뷰트 값은 명시되지 않았다는 전제로 기본 값인 ltr로 전송된다.)
username=tom&username-dir=ltr
disabled boolean attributes

요소를 비활성화한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

form unique identifier

<form> 요소와 연결할 때 연결하고자 하는 <form> 요소의 id를 지정한다.

About Unique identifier

문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.

maxlength non-negative integers

최대 입력 길이를 나타낸다.

About Non-negative integers

음수가 아닌 유효한 정수를 나타낸다.

minlength non-negative integers

최소 입력 길이를 나타낸다.

About Non-negative integers

음수가 아닌 유효한 정수를 나타낸다.

name non empty string

요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox"> 요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.

<form> 요소에서 name 애트리뷰트가 HTML5에서 폐기되었다. 대신에 id 애트리뷰트를 식별값으로 사용한다.
About Non empty string

비워있지 않는 문자열을 나타낸다.

placeholder strip newline

입력 요소에 입력할 값에 대한 힌트를 사용자에게 제시한다.

About Strip newline

U+000A LF(줄바꿈) 또는 U+000D CARRIAGE RETURN(CR) 문자를 포함하지 않은 문자열을 나타낸다.

readonly boolean attributes

입력 요소에 대한 편집 가능 여부를 나타낸다. 지정이 되면 편집이 불가능하다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

required boolean attributes

필수로 입력해야 할 입력 요소로 지정할지 여부를 나타낸다. 지정이 되면 필수 입력 요소가 된다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

rows non-negative integers선택

가려지지 않고 보여지는 줄(행)수를 지정한다. 기본값은 2이다. 시각적으로 요소의 높이에 변화가 생긴다.

About Non-negative integers

음수가 아닌 유효한 정수를 나타낸다.

기본값

2

사용 예

wrap enumerated attribute

입력된 텍스트를 제출시 줄바꿈에 대한 방법을 지정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

기본값

soft

사용되는 키워드

hard

유저 에이전트는 <textarea> 요소의 입력 길이 제한으로 발생한 강제 개행 지점에서 자동으로 줄 바꿈(CR+LF)를 삽입한다. 따라서 사용자가 의도한 줄 바꿈과 함께 개행이 추가적으로 발생한다. <textarea> 요소의 cols 애트리뷰트의 영향을 받으므로  적절한 값을 지정해야 한다. 이러한 환경이 필요한 경우의 한 예는 입력받은 텍스트를 지정된 컬럼의 크기로 출력해야 하는 경우일 것이다.

soft

사용자가 의도한 줄 바꿈만 개행으로 인정하여 제출한다. 기본값으로 사용된다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

지원 웹브라우저